<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="担保客户查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      v-loading="loading"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <project-new-dialog
      :visible.sync="editVisible"
      :table-id="tableId"
      :form-data="formData"
      @success="getData()"
    ></project-new-dialog>

    <attach-dialog :visible.sync="attachVisible" :project-data="attachData"></attach-dialog>

    <project-view-dialog
      :visible.sync="viewVisible"
      :batch-no="viewAttachNo"
      :tab-name="viewTabName"
      :query-id="queryId"
    ></project-view-dialog>
  </div>
</template>

<script>
import { fastParams } from '@/bank/views/fast/index'

import ProjectNewDialog from '@/bank/views/fast/new/ProjectNewDialog'
import AttachDialog from '@/bank/views/fast/AttachDialog'
import ProjectViewDialog from '@/bank/views/fast/ProjectViewDialog'

export default {
  components: {
    ProjectNewDialog,
    AttachDialog,
    ProjectViewDialog,
  },
  mixins: [fastParams],
  data() {
    return {
      batchKey: 'customer_related_quick_batch_id',
      loading: false,
      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 10,
        'loan_register_status.eq': 1,
      },
      enumAttachmetStatus: {
        0: '未完成',
        1: '已完成',
      },
      tableName: 'customer_related_quick',
      tableData: [],
      tableColumns: [
        { attrs: { label: '借款人', prop: 'customer_name', width: 100 } },
        { attrs: { label: '组织类型', prop: 'org_class_name' } },
        { attrs: { label: '证件号', prop: 'customerNo', width: 120 } },
        { attrs: { label: '负责人姓名', prop: 'corp_name' } },
        { attrs: { label: '年龄', prop: 'age' } },
        { attrs: { label: '从业年限', prop: 'plant_year' } },
        { attrs: { label: '产业规模', prop: 'plant_area' } },
        { attrs: { label: '授信金额', prop: 'apply_funds' } },
        { attrs: { label: '资金用途', prop: 'funds_use_dir', width: 120 } },
        { attrs: { label: '本次支用金额', prop: 'cur_use_funds' } },
        { attrs: { label: '支用期限（贷款期限）', prop: 'months' } },
        { attrs: { label: '贷款利率（年）', prop: 'load_rate' } },
        { attrs: { label: '担保费率', prop: 'gua_rate' } },
        { attrs: { label: '保费金额(元)', prop: 'gua_fee' } },
        { attrs: { label: '贷款开始时间', prop: 'load_date', width: 100 } },
        { attrs: { label: '贷款结束时间', prop: 'load_end_date', width: 100 } },
        // { attrs: { label: '审批完成时间', prop: 'city_res_date_corp', width: 90 } },
        { attrs: { label: '放款金额(万元)', prop: 'reply_funds', width: 90 } },
        {
          attrs: { label: '操作', align: 'center', width: 130, fixed: 'right' },
          operations: [
            {
              content: '基础附件',
              icon: 'fa fa-clipboard',
              event: this.handleAttach,
              attrs: { class: 'p-0 m-2' },
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
              attrs: { class: 'p-0 m-2' },
            },
            // { content: '合同处理', icon: 'fa fa-gavel', event: this.handleContract, attrs: { class: 'p-0 m-2' } },
            // { content: '修改', icon: 'fa fa-edit', event: this.handleEdit, attrs: { class: 'p-0 m-2' } }
          ],
        },
      ],
      tableCount: 0,
      editVisible: false,
      tableId: '',
      formData: {},
      viewVisible: false,
      queryId: '',
      attachVisible: false,
      attachData: {},
      viewTabName: 'detail',
      viewAttachNo: '',
    }
  },

  created() {},
  computed: {
    status() {
      return this.$route.query.status
    },
  },
  watch: {
    status: {
      handler: function (val) {
        this.params = { ...this.params, ...this.baseParams }
        this.params['load_end_date.lte'] =
          +val === 1 ? this.$utils.dateFormat(+new Date() + 60 * 8.64e7, 'yyyy-MM-dd') : ''
        this.getData()
      },
      immediate: true,
    },
  },
  methods: {
    handleAttach(row = {}) {
      this.attachData = { ...row }
      this.attachVisible = true
    },
    handleContract() {},
    handleView(row = {}) {
      this.queryId = row.customer_related_id || ''
      this.viewAttachNo = row[this.batchKey]
      this.viewTabName = 'detail'
      this.viewVisible = true
    },
    handleEdit(row = {}) {
      this.editVisible = true
      this.tableId = row.customer_related_id || ''
      this.formData = { ...row }
    },
    getData(index = 1) {
      this.loading = true
      this.params.index = index
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.totalCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.createTime = this.$utils.dateFormat(item.create_time, 'yyyy-MM-dd hh:mm')
      item.customerNo = +item.customer_type === 1 ? item.register_no : item.lender_idcard
      item.itemStatus = this.enumAttachmetStatus[item.atachment_status]
      return item
    },
  },
}
</script>
<style lang="scss" scoped></style>
